<template>
    <view>
        <view v-if="goods.length > 0" class="list padding-bottom-base">
            <view
                class="item bg-white margin-bottom-base radius-xl"
                v-for="item in goods"
                :key="item.itemid"
                @click="goPage(`/pages/goods/goodsdetail?id=${item.itemid}`)"
            >
                <image style="width: 100%" :src="item.thumb" mode="widthFix" />
                <view class="padding-tb-base padding-lr-sm">
                    <view class="text-lg title" style="line-height: 1.5">{{ item.title }}</view>
                    <view class="flex align-center justify-between margin-top-xs">
                        <view class="text-red text-xl text-bold">￥ {{ parseFloat(item.price) }}</view>
                        <button
                            @click="goPage(`/pages/goods/goodsdetail?id=${item.itemid}`)"
                            class="cu-btn bg-main round text-sm"
                            style="height: 50rpx"
                        >
                            立即抢购
                        </button>
                    </view>
                </view>
            </view>
        </view>
        <view v-if="goods.length <= 0">
            <empty />
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { goPage } from "@/utils";
import empty from "@/components/common/empty.vue";

interface listType {
    goods: any[];
}
const props = withDefaults(defineProps<listType>(), {
    goods: () => []
});
</script>

<style lang="scss" scoped>
// .list {
//     column-count: 2;
//     column-gap: 30rpx;
//     padding-bottom: calc(env(safe-area-inset-bottom) / 2);

//     .item {
//         // box-sizing: border-box;
//         break-inside: avoid;
//         box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
//     }
// }

.list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30rpx;

    .item {
        grid-row-start: auto;

        .title {
            line-height: 50rpx;
            height: 100rpx;
            display: -webkit-box;
            word-break: break-all;
            overflow: hidden;
            white-space: pre-line;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
    }
}
</style>
